<template>
  <div class="map">
    <div id="container" ></div>
  </div>
</template>

<script>

import $ from 'jquery'
export default {
  name: 'A',
  data(){
    return{

    }
  },

  mounted(){
    setTimeout(()=>{
      this.mapInit(39.06455275, 117.16775697);
    }, 3000)
  },

  methods:{
    mapInit(lat, lng) {
        console.log("this", this)

      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
      //设置地图中心点
      var myLatlng = new qq.maps.LatLng(lat, lng);
      
      //定义工厂模式函数
      var myOptions = {
        zoom: 18, //设置地图缩放级别
        center: myLatlng, //设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见 MapType
      };
      
      //获取dom元素添加地图信息
      var map = new qq.maps.Map(
        document.getElementById("container"),
        myOptions
      );

      //给定位的位置添加图片标注
      var marker = new qq.maps.Marker({
        position: myLatlng,
        map: map
      });

      // 定义InfoWindow
      var infoWin = new qq.maps.InfoWindow( {
			  map : map
		  });

      // 点击位置
      qq.maps.event.addListener(map, 'click', (event)=> {
        const url = "https://apis.map.qq.com/ws/geocoder/v1/?location="
        const KEY = "Y3XBZ-2G5KX-I6U4U-Z4WZD-KYBWV-6LBUG";
        $.ajax({
          url: url,
          type: "GET",
          data: {
            key: KEY,
            location: String(event.latLng.getLat()) + ',' + String(event.latLng.getLng()),
            output: "jsonp"
          },
          dataType: "jsonp",
          success: (res)=> {
            var result = JSON.stringify(res);
            infoWin.open()
            let renderObj = `<div style="text-align:center;white-space:nowrap;margin:10px;">` + 
                res.result.formatted_addresses.recommend || res.result.formatted_addresses.rough +`</div>`
            infoWin.setContent(renderObj)
            infoWin.setPosition(event.latLng)
          }
        })
      });
    },
  }
   
  
}
</script>

<style lang="scss" scoped>
.map{
  width: 100%;
  height: 400px;
}
#container{
  width: 100%; 
  height: 400px
}
</style>
